<template>
	<div>
		<el-container>
			<el-header class="header">
				<el-button-group>
					<el-button type="primary" @click="this.$router.push('/attendcreat')">
						<el-icon>
							<Calendar />
						</el-icon>考勤申请
					</el-button>
					<el-button type="primary" @click="this.$router.push('/contractcreation')">
						<el-icon>
							<Document />
						</el-icon>合同申请
					</el-button>
					<el-button type="primary" @click="this.$router.push('/feecreate')">
						<el-icon>
							<Money />
						</el-icon>费用申请
					</el-button>
					<el-button type="primary" @click="this.$router.push('/peoplechangecreate')">
						<el-icon>
							<User />
						</el-icon>人事变更申请
					</el-button>
				</el-button-group>
			</el-header>
			<el-row>
				<el-col :span="4">
					<div class="grid-content ep-bg-purple" />
					<el-card class="box-card">待处理申请：{{steps.length}}</el-card>
				</el-col>
				<el-divider />
				<div></div>
			</el-row>
			<el-main>
				<el-tabs class="demo-tabs">
					<el-tab-pane label="合同">
						<el-table :row-class-name="tableRowClassName" :data="contracts" stripe style="width: 100%" @row-dblclick="test">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="创建人" />
							<el-table-column prop="contractType" label="合同类型" />
							<el-table-column prop="contractAparty" label="甲方" />
							<el-table-column prop="contractBparty" label="乙方" />
							<el-table-column prop="stepProcessor" label="待审批人" />
							<!-- 表格下面分页区域 -->
							<el-pagination small layout="total,prev,pager,next,jumper" :total="steps.length" :page-size="pagesize"
							 pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="费用">
						<el-table :row-class-name="tableRowClassName" :data="fees" stripe style="width: 100%" @row-dblclick="testfee">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="创建人" />
							<el-table-column prop="feeKind" label="费用种类" />
							<el-table-column prop="feeCost" label="金额" />
							<el-table-column prop="stepProcessor" label="待审批人" />
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="考勤">
						<el-table :row-class-name="tableRowClassName" :data="abs" stripe style="width: 100%" @row-dblclick="testattend">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="创建人" />
							<el-table-column prop="attendType" label="申请类型" />
							<el-table-column prop="stepProcessor" label="待审批人" />
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="人事变更">
						<el-table :row-class-name="tableRowClassName" :data="perman" stripe style="width: 100%" @row-dblclick="testper">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="发起人" />
							<el-table-column prop="permanageDepartment" label="调动后部门" />
							<el-table-column prop="permanageTransfer" label="调动后岗位" />
							<el-table-column prop="permanageSalary" label="调动后薪资" />
							<el-table-column prop="stepProcessor" label="待审批人" />
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
	</div>
	<!-- 合同弹窗 -->
	<el-dialog v-model="dialogVisible" title="合同审批" width="30%" :before-close="handleClose">
		<span>
			<h3>处理意见</h3>
		</span>
		<span>{{this.contracts[this.index].stepOpinions}}</span>
		<span>
			<h3>合同内容</h3>
		</span>
		<span>{{this.contracts[this.index].contractContent}}</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="Submit1">审批</el-button>
				<el-button type="primary" @click="Submit11">驳回</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 费用弹窗 -->
	<el-dialog v-model="dialogVisiblefee" title="费用审批" width="30%" :before-close="handleClose">
		<span>
			<h3>处理意见</h3>
		</span>
		<span>{{this.fees[this.index].stepOpinions}}</span>
		<span>
			<h3>合同内容</h3>
		</span>
		<span>{{this.fees[this.index].feeDetail}}</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="Submit2">审批</el-button>
				<el-button type="primary" @click="Submit22">驳回</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 考勤弹窗 -->
	<el-dialog v-model="dialogVisibleattend" title="考勤审批" width="30%" :before-close="handleClose">
		<span>
			<h3>处理意见</h3>
		</span>
		<span>{{this.abs[this.index].stepOpinions}}</span>
		<span>
			<h3>合同内容</h3>
		</span>
		<span>{{this.abs[this.index].attendContent}}</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="Submit3">审批</el-button>
				<el-button type="primary" @click="Submit33">驳回</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 人事弹窗 -->
	<el-dialog v-model="dialogVisibleper" title="人事变更审批" width="30%" :before-close="handleClose">
		<span>
			<h3>处理意见</h3>
		</span>
		<span>{{this.perman[this.index].stepOpinions}}</span>
		<span>
			<h3>合同内容</h3>
		</span>
		<span>{{this.perman[this.index].feeDetail}}</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="Submit4">审批</el-button>
				<el-button type="primary" @click="Submit44">驳回</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				steps: [],
				fees: [],
				contracts: [],
				abs: [],
				perman: [],
				step: {
					stepProcessorid: this.$store.state.user.userId,
					stepProcessor: this.$store.state.user.userName,
					stepIsend: '否',
				},
				fee: {

				},
				index: null,
				pagesize: 2, // 一页有多少条数据
				currentPage: 1, //当前的页数
				dialogVisible: false,
				dialogVisiblefee: false,
				dialogVisibleattend: false,
				dialogVisibleper: false,
			}
		},
		methods: {
			feeget() {
				let that = this
				that.step.stepKind = '费用申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.fees = res.data
					console.log(that.fees);
				})
			},
			contraget() {
				let that = this
				that.step.stepKind = '合同申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.contracts = res.data
					console.log(that.contracts);
				})
			},
			absget() {
				let that = this
				that.step.stepKind = '考勤申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.abs = res.data
					console.log(res);
				})
			},
			permanget() {
				let that = this
				that.step.stepKind = '人事变更申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.perman = res.data
					console.log(res);
				})
			},
			handleEdit(number, fee) {
				console.log(number, fee)
			},
			// 每页显示的条数
			handleSizeChange(val) {
				// 改变每页显示的条数 
				this.pagesize = val
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},
			// 显示第几页
			handleCurrentChange(val) {
				// 改变默认的页数
				this.currentPage = val
			},
			test(row) {
				let that = this
				console.log(row.index)
				that.index = row.index
				that.dialogVisible = true
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.index = rowIndex;
			},
			testfee(row) {
				let that = this
				console.log(row.index)
				that.index = row.index
				that.dialogVisiblefee = true
			},
			testattend(row) {
				let that = this
				console.log(row.index)
				that.index = row.index
				that.dialogVisibleattend = true
			},
			testper(row) {
				let that = this
				console.log(row.index)
				that.index = row.index
				that.dialogVisibleper = true
			},
			Submit1() {
				let that = this
				this.contracts[this.index].stepIsend = '通过'
				console.log(this.contracts[this.index])
				let str = qs.stringify(this.contracts[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit2() {
				let that = this
				this.fees[this.index].stepIsend = '通过'
				console.log(this.fees[this.index])
				let str = qs.stringify(this.fees[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit3() {
				let that = this
				this.abs[this.index].stepIsend = '通过'
				console.log(this.abs[this.index])
				let str = qs.stringify(this.abs[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit4() {
				let that = this
				this.perman[this.index].stepIsend = '通过'
				console.log(this.perman[this.index])
				let str = qs.stringify(this.perman[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit11() {
				let that = this
				this.contracts[this.index].stepIsend = '打回'
				console.log(this.contracts[this.index])
				let str = qs.stringify(this.contracts[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit22() {
				let that = this
				this.fees[this.index].stepIsend = '打回'
				console.log(this.fees[this.index])
				let str = qs.stringify(this.fees[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit33() {
				let that = this
				this.abs[this.index].stepIsend = '打回'
				console.log(this.abs[this.index])
				let str = qs.stringify(this.abs[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},
			Submit44() {
				let that = this
				this.perman[this.index].stepIsend = '打回'
				console.log(this.perman[this.index])
				let str = qs.stringify(this.perman[this.index])
				this.$axios.get("http://localhost:8080/step/update?" + str).then(function(res) {
					console.log(res);
					that.$router.go(0);
				})
			},

		},
		created() {
			let that = this
			let str = qs.stringify(that.step)
			this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
				that.steps = res.data
				console.log(res);
			})
			this.feeget()
			this.contraget()
			this.absget()
			this.permanget()
		},
		// computed: {
		//     stepOpinions: function() {
		//       return this.fees[this.index].stepOpinions
		//     }
		//   }
	}
</script>

<style>
	.el-header.header {
		background-color: white;
		margin: auto;
	}

	.el-main {
		background-color: #FFFFFF;
	}

	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 12px;
		font-weight: 600;
	}
</style>
